<template>
    <div>
        <el-row>
            <el-col :span="4">
                <div class="kuang">
                    <div class="smallFont">当前跟进客户</div>
                    <div class="bigFont">{{customesNum}}</div>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="kuang">
                    <div class="lr">
                        <div>
                            <div class="smallFont">被分配客户数（人）</div>
                            <div class="bigFont">{{customesNum}}</div>
                        </div>

                        <!-- 时间区间 -->
                        <el-date-picker
                            v-model="selectTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" :change="getSelectTime()">
                        </el-date-picker>

                    </div>

                    <!-- 图表 -->
                    <div>
                        <div class="cavasbox" ref="SUMEchart"></div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 列表-->
        <div class="kuang" style="min-height: 520px;">
            <div class="lr">
                <div class="smallFont">客户阶段数</div>

                <el-button-group>
                    <el-button type="primary" @click="show = '0'">卡片视图</el-button>
                    <el-button type="primary" @click="show = '1'">列表视图</el-button>
                </el-button-group>
            </div>

            <!-- 卡片 -->
            <div class="scrollbar" v-show="show == '0'">
                <div class="bian" v-for="(item, index) in clientStatus" :key="index">
                    <div class="lr">
                        <div class="smallFont">{{item.label}}</div>
                        <div class="smallFont">{{item.custNum}}</div>
                    </div>

                    <div class="biao">
                        <el-table size="small" :data="item.cunsData" highlight-current-row v-loading="loading" border
                                  element-loading-text="拼命加载中" style="width: 100%;">
                            <el-table-column prop="clientName" label="客户姓名" width="150" fixed>
                            </el-table-column>
                            <el-table-column prop="empName" label="负责员工" width="150">
                            </el-table-column>
                            <el-table-column prop="clientPhone" label="联系电话" width="150">
                            </el-table-column>
                            <el-table-column prop="clientDescription" label="客户描述" width="150">
                            </el-table-column>
                            <el-table-column align="center" label="操作" min-width="150">
                                <template slot-scope="scope">
                                    <el-button @click="detailHandle(scope.row)" type="text" size="small">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>


            <!-- 列表 -->
            <div style="margin-top: 20px;" v-show="show == '1'">
                <div style="display: flex;">
                    <div class="ziKuang" v-for="(item, index) in clientStatus" :key="index">
                        <div class="smallFont">{{item.label}}</div>
                        <div class="bigFont">{{item.custNum}}</div>
                    </div>
                </div>

                <!--列表-->
                <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                          element-loading-text="拼命加载中" style="width: 100%;">
                    <el-table-column prop="clientName" label="客户姓名" width="150" fixed>
                    </el-table-column>
                    <el-table-column prop="clientStatusName" label="客户阶段" width="150">
                    </el-table-column>
                    <el-table-column prop="empName" label="负责员工" width="150">
                    </el-table-column>
                    <el-table-column prop="clientSex" label="客户性别" width="150">
                    </el-table-column>
                    <el-table-column prop="clientBirthday" label="客户生日" width="150">
                    </el-table-column>
                    <el-table-column prop="clientPhone" label="联系电话" width="150">
                    </el-table-column>
                    <el-table-column prop="clientDescription" label="客户描述" width="150">
                    </el-table-column>
                    <el-table-column prop="clientInstent" label="客户意向" width="150">
                    </el-table-column>
                    <el-table-column prop="clientSource" label="客户来源" width="150">
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="150">
                        <template slot-scope="scope">
                            <el-button @click="detailHandle(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <ClientDetail ref="clientDetail"/>
    </div>
</template>

<script>
    import * as Chart from "echarts";
    import ClientDetail from '@/views/customer/client/client_detail'

    export default {
        props: {
            deptId: {
                type: String,
                default: ''
            }
        },
        components: {
            ClientDetail
        },
        data() {
            return {
                // 时间段
                selectTime: '',
                // 0显示卡片 1显示列表
                show: '0',
                //客户列表
                customesNum: 0,
                //员工列表
                empList: [],
                // 加载列表
                loading: '',
                // 列表数据
                listData: [],
                // 图表
                SUMoption: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    legend: {
                        data: [{
                            name: '',
                            icon: 'rect'
                        }],
                        top: 1,
                        left: 1,
                        itemGap: 10,
                        itemWidth: 12,
                        itemHeight: 12,
                        textStyle: {
                            fontSize: 12,
                            color: "#323232"
                        }
                    },
                    grid: {
                        left: 50,
                        right: 10,
                        top: 30,
                        bottom: 30,
                        borderWidth: 1
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            height: 70,
                            interval: 0,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    series: [{
                        name: '',
                        //   type: 'bar',
                        type: 'line',
                        barGap: 0,
                        data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
                        barWidth: 10,
                        itemStyle: {
                            color: "#108ff9"
                        }
                    }]
                },

                listData: [],
                clientStatus: [],
                customerData: [],
            }
        },
        watch: {
            deptId(n, o) {
                this.queryDataHandle()
            },
        },
        mounted() {
            this.getSUM()
            this.getStageData()
        },
        methods: {
            queryDataHandle() {
                let payData = {
                    deptId: this.deptId
                }
                let that = this
                this.$request("/api/emp/getEmpList/1_0", payData, "POST").then((data) => {
                    this.empList = data.rows
                }).then(() => {
                    for (let i = 0; i < this.empList.length; i++) {
                        let item = this.empList[i]
                        let empData = {
                            empId: item.empId
                        }
                        that.$request("/api/customers/getCustomersByParams/1_0", empData, 'POST').then((data) => {
                            this.customesNum += data.rows.length
                        })
                    }
                });
            },

            aa() {
                let result = []
                for (let i = 7; i >= 1; i--) {
                    result.push(this.$moment().subtract(i, "days").format("YYYY-MM-DD"))
                }
                return result
            },

            getSelectTime() {

            },

            initLineChart1(ref) {
                var random1 = [];
                var random2 = [];
                for (let i = 0; i < 7; i++) {
                    random1.push(this.listData[i].addNum)
                    random2.push(this.listData[i].deleteNum)
                }
                this.chart = this.$echarts.init(ref)
                let dateData = this.aa()
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        top: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateData
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '建群',
                            type: 'line',
                            data: random1
                        },
                        {
                            name: '注销',
                            type: 'line',
                            data: random2
                        }
                    ]
                };
                this.chart.setOption(option)
            },

            // 图表
            getSUM(timeData) {
                this.chart = Chart.init(this.$refs.SUMEchart)
                if (timeData == null) {
                    this.SUMoption.xAxis.data = this.aa();
                } else {
                    this.SUMoption.xAxis.data = timeData
                }
                this.chart.setOption(this.SUMoption)
            },
            async getStageData() {
                let that = this

                let data = await this.$request("/api/clientStage/queryClientStageByParams/1_0", {}, "POST")
                let dataSource = data.rows

                for (let i = 0; i < dataSource.length; i++) {
                    let item = dataSource[i]
                    let payload = {
                        clientType: "1",
                        clientStatusId: item.clientStatusId
                    }
                    let clientData = await that.$request("/api/customers/getCustomersByParams/1_0", payload, "POST")
                    that.clientStatus.push({
                        label: item.clientStatusName,
                        value: item.clientStatusId,
                        custNum: clientData.rows.length,
                        cunsData: clientData.rows
                    })
                }

                that.$request("/api/customers/getCustomersByParams/1_0", {clientType: "1"}, "POST").then((data) => {
                    for (let i = 0; i < data.rows.length; i++) {
                        if (data.rows[i].clientSex == '1') {
                            data.rows[i].clientSex = '男'
                        } else {
                            data.rows[i].clientSex = '女'
                        }
                        that.listData = data.rows
                    }
                })
            },
            detailHandle(row) {
                this.$refs.clientDetail.open(true, row)
            },
        },
        name: "AnalyzeList"
    }
</script>

<style scoped>
    .smallFont {
        font-weight: 600;
        font-size: 16px;
    }

    .bigFont {
        font-weight: 700;
        font-size: 40px;
    }

    .kuang {
        height: 180px;
        background: #fff;
        border-radius: 10px;
        margin: 8px;
        padding: 15px;
    }

    .lr {
        display: flex;
        justify-content: space-between;
    }

    .bian {
        border: 1px solid #d7d7d7;
        border-radius: 5px;
        min-height: 460px;
        margin: 0 5px;
        padding: 15px;
        box-sizing: border-box;
        flex: 1;
        margin-top: 20px;
        width: 50%;
    }

    .biao {
        margin-top: 20px;
        text-align: center;
    }

    .ziKuang {
        padding: 15px 0 30px 25px;
        background: rgb(237, 242, 253);
        border-radius: 8px;
        margin: 0 5px 30px 5px;
        flex: 1;
    }

    .cavasbox {
        box-sizing: border-box;
        width: 100%;
        height: 120px;
    }

    .scrollbar {
        display: flex;
        flex-wrap: wrap;
    }

    .el-table th {
        background: rgb(10, 73, 121) !important;
    }

    .el-table tr {
        background: rgb(6, 24, 45) !important;
    }
</style>
